<template>
    <view>
        <view class="content">
            <view class="left">
                <image class="headicon" v-bind:src="userinfo.headicon" mode="aspectFill"></image>
            </view>
            <view class="right">
                <text class="title">{{userinfo.username}}</text>
                <text class="user-resume">{{userinfo.resume}}</text>
            </view>
        </view>
        <view class="entry-wrap">
            <view class="entry" v-for="(item, index) in entries" :key="index">
                <image class="entryicon" :src="item.icon" mode="aspectFill"></image>
                <text>{{item.text}}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userinfo: {
                userid: '001',
                headicon: '/static/img/person/head.jpg',
                username: '钟舒艺',
                resume: '我们认识一下吧！'
            },
            entries: [
                { icon: '../../static/img/person/交友.png', text: '发现好友' },
                { icon: '../../static/img/person/我们.png', text: '浏览记录' },
                { icon: '../../static/img/person/任务.png', text: '我的订单' },
                { icon: '../../static/img/person/通告.png', text: '我的帖子' },
                { icon: '../../static/img/person/即时聊天.png', text: '我的评论' },
                { icon: '../../static/img/person/邀请.png', text: '社区公约' },
                { icon: '../../static/img/person/认证.png', text: '设置' }
            ]
        }
    },
    methods: {

    }
}
</script>

<style>
/* 全局字体设置 */
body {
    font-family: Arial, sans-serif;
}

/* 内容区域样式 */
.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f4f9ff; /* 主色调浅蓝色背景 */
    padding: 20rpx; /* 调整内边距 */
    border-radius: 10rpx; /* 圆角 */
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 左侧头像容器样式 */
.left {
    margin-right: 15rpx; /* 减小右边距 */
}

/* 头像样式 */
.headicon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);/* 阴影效果 */
}

/* 右侧信息容器样式 */
.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 用户名样式 */
.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333; /* 深色字体 */
    margin-bottom: 8rpx;
}

/* 用户编号和简介样式 */
.user-number,
.user-resume {
    font-size: 24rpx;
    color: #666; /* 灰色字体 */
    margin-bottom: 8rpx;
}

/* 入口项容器样式 */
.entry-wrap {
    width: 100%;
    background-color: #fff; /* 白色背景 */
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
    border-radius: 8rpx; /* 圆角 */
    overflow: hidden; /* 隐藏溢出部分 */
    margin-top: 30rpx; /* 顶部间距 */
}

/* 单个入口项样式 */
.entry {
    display: flex;
    align-items: center;
    padding: 20rpx 15rpx; /* 内边距 */
    border-bottom: 1px solid #eee; /* 分割线 */
}

/* 入口项图标样式 */
.entryicon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 15rpx; /* 图标与文字之间的间距 */
}

/* 入口项文字样式 */
.entry text {
    font-size: 28rpx;
    color: #333; /* 深色字体 */
}
</style>